<template>
    <el-container style="height: 100%; border: 1px solid #eee" class="home-container">
        <el-header style="font-size: 32px;backgroundColor: #E8EBEE">
            <el-row style="height: 100%;">
                <el-col style="height: 100%;display:flex;align-items: center;" :span="8">
                    <el-tag v-if="userInfo">{{userInfo.patientName}}{{userInfo.medicalNumber?' : ' + userInfo.medicalNumber:''}}</el-tag>
                </el-col>
                <el-col style="height: 100%;display:flex;align-items: center;justify-content: center;" :span="8">
                    <span class="title">{{questionnaireObj.questionnaireTitle}}</span>
                </el-col>
                <el-col style="height: 100%;display:flex;justify-content: flex-end;" :span="8">
                    <el-button plain @click="logout">退出</el-button>
                </el-col>
            </el-row>
        </el-header>
        <el-container>
            <el-aside width="140px" style="padding-left:20px;padding-top:20px">
                <el-radio-group v-model="questionnaireObj.questionnaire"  @change="changeQuestionnaire">
                    <el-row style="text-align: left;" v-for="item in questionnaireObj.questionnaireArray">
                        <el-radio :label="item.label" border>{{item.text}}</el-radio>
                    </el-row>
                </el-radio-group>
            </el-aside>
            <el-main>
                <div v-show="questionnaireObj.questionnaire === '1'"><transition name="fade-transverse" ><SkinType ></SkinType></transition></div>
                <div v-show="questionnaireObj.questionnaire === '2'"><transition name="fade-transverse"><div>其他问卷正在上线中。。</div></transition></div>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
    import util from '@/libs/util.js'
    import SkinType from './tpls/SkinType'

    export default {
        name: "Home",
        components: {
            SkinType
        },
        data() {
            return {
                questionnaireObj: {
                    questionnaire: '1',
                    questionnaireTitle: '皮肤分类',
                    questionnaireArray: [
                        {
                            label: '1',
                            text: '皮肤分类'
                        },
                        {
                            label: '2',
                            text: '其他问卷'
                        }
                    ],
                },
                userInfo: null,
            }
        },
        mounted() {
            this.getUserInfo()
        },
        methods: {
            changeQuestionnaire (val) {
                let array = this.questionnaireObj.questionnaireArray;
                for(let i=0;i<array.length;i++){
                    let item = array[i];
                    if (val === item.label) {
                        this.questionnaireObj.questionnaireTitle = item.text
                    }
                }
            },
            getUserInfo(){
                const userInfo = util.cookies.get('userInfo')
                if(userInfo){
                    this.userInfo = JSON.parse(userInfo)
                }
            },
            logout(){
                this.$confirm('是否确认退出?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    util.cookies.remove('token')
                    util.cookies.remove('userInfo')
                    // 跳转路由
                    this.$router.push({
                        name: 'login'
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });

            }
        }
    }
</script>

<style scoped>
    .home-container {
        height: 100%;
        width: 100%;
        min-width: 900px;
        background-size: cover;
        background-position: center;
        background-image: url('/image/theme/line/bg.jpg ');
        background-repeat: repeat;
        overflow-y: hidden
    }

    .title {
        display: flex;
        justify-content: center;
        align-items: center;
        color: rgba(0, 0, 0, 0.45);
        font-size: 40px;
        font-weight: bold;
    }
</style>
